<template>
  <div>
    <button @click="run">调用跟组件的方法</button>
    <opt-com
      @ddr="send"
      :mm="true"
      cid="1888"
      sex="男"
      :mylist="list"
    ></opt-com>
    <!--  -->
    <el-date-picker
      :clearable="true"
      v-model="startDate"
      type="daterange"
      start-placeholder="选择开始日期"
      end-placeholder="选择结束日期"
      format="yyyy/MM/dd"
      :picker-options="startPickerOptions"
    >
    </el-date-picker>
  </div>
</template>
<script>
// 如何上手一个ui框架 elemntui antd-vue   iview (mintui,vantui)
// 1组件名称特性 如el-button  a-button
// 2.组件的属性Attributes
// 3.组件的方法 this.$refs.myform.restFileds()
// 4.组件的事件
// 5.组件的插槽
// 6 子组件的属性 事件 方法  插槽

import optCom from './optCom.vue'
export default {
  name: 'op',
  components: { optCom },
  data () {
    return {
      msg: '我是option组件',
      list: [1, 2, 3],
      startDate: '', //时间
      minTime: new Date('2022-7-2').getTime(), //时间戳，对应时间为：'2021-04-20 12:00:00'
      maxTime: new Date('2022-7-15').getTime(), //时间戳，对应时间为：'2021-04-25 12:00:00'
      startPickerOptions: {
        disabledDate: time => {
          //小于最小时间或者大于最大时间都不可选
          return (
            time.getTime() < this.minTime - 24 * 3600000 ||
            time.getTime() > this.maxTime
          )
        }
      }
    }
  },
  myname: '你好',
  mounted () {
    // this.$root 获取的是vue中main.js 的根实例
    console.log(this.$root.hello)
    console.log(this.$options)
    // this.$slots 获取所有的插槽集合
  },
  methods: {
    myPick ({ maxDate, minDate }) {
      console.log(maxDate, minDate)
    },
    send () {
      alert(1)
    },
    run () {
      this.$root.krun()
    }
  }
}
</script>
